<template>
    <div class="commandReport">
        <div class="box" v-if="accidentInfo">
            <div class="report-header">
                <h1>{{ accidentInfo.reportTitle }}</h1>
                <p>
                    (第{{ accidentInfo.reportDate.split("年")[0] }}-{{
                        accidentInfo.periodNumber
                    }}次)
                </p>
                <div class="headerLine">
                    <span>{{ accidentInfo.reportUnit }}</span>
                    <span>{{ accidentInfo.reportDate }}</span>
                </div>
            </div>
            <div class="report-content">
                <div class="content-first">
                    <h3>一、生产安全事故总体情况</h3>
                    <div class="firstItem">
                        <div>
                            <p>{{ accidentInfo.total }}</p>
                        </div>
                    </div>
                    <h3 v-if="accidentInfo.stat.length !== 0">
                        二、生产安全事故分项统计情况
                    </h3>
                    <div
                        class="firstItem"
                        v-if="accidentInfo.stat.length !== 0"
                    >
                        <div>
                            <p
                                class="accidentDsc"
                                v-for="(item, index) of accidentInfo.stat"
                                :key="index"
                                v-html="item"
                            ></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="report-footer">
                <div class="footerLine">
                    <span>海南省应急管理厅</span>
                    <span>编辑:{{ accidentInfo.reporter }}</span>
                </div>
            </div>
        </div>
        <div class="funcBtn">
            <p
                @click="loadReport()"
                :style="{ cursor: countDown > 0 ? 'not-allowed' : 'pointer' }"
            >
                <img
                    class="mouseout"
                    src="/images/fireReport/icon/xiazai.png"
                    alt=""
                />
                <img
                    class="mousein"
                    src="/images/fireReport/icon/xiazai2.png"
                    alt=""
                />
                下载
                <span v-show="countDown > 0">({{ countDown }})</span>
            </p>
            <p @click="closePreview(false)">
                <img
                    class="mouseout"
                    src="/images/fireReport/icon/close.png"
                    alt=""
                />
                <img
                    class="mousein"
                    src="/images/fireReport/icon/close2.png"
                    alt=""
                />
                关闭
            </p>
        </div>
    </div>
</template>

<script>
import axios from "axios";
export default {
    // 作战指挥简报
    name: "commandReport",
    data() {
        return {};
    },
    props: ["accidentInfo", "downParam"],
    watch: {
        accidentInfo: {
            handler(val) {
                console.log(val);
                // this.getEventData();
            },
            deep: true,
            immediate: true,
        },
        downParam: {
            handler(val) {
                console.log(val);
                // this.getEventData();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        // 关闭报告
        closePreview() {
            this.$emit("closeReport", false);
        },
        // 专报下载
        loadReport() {
            let startTime = this.downParam.dateRange
                ? `${this.downParam.dateRange[0]} 00:00:00`
                : null;
            let endTime = this.downParam.dateRange
                ? `${this.downParam.dateRange[1]} 00:00:00`
                : null;
            let industryCategory = this.downParam.eventType || null;
            let accidentLevel = this.downParam.eventLevel || null;
            let xzqh = this.downParam.eventAarea || null;
            let deathToolGeq = this.downParam.eventDeath || null;
            let directPecuniaryLossGeq = this.downParam.eventLost || null;
            let param = {
                startTime,
                endTime,
                industryCategory,
                accidentLevel,
                xzqh,
                deathToolGeq,
                directPecuniaryLossGeq,
            };
            axios({
                url: `${sjzxUrl}/api/safeProductDisaster/download/briefReport`,
                method: "post",
                data: param,
                responseType: "blob",
            }).then(res => {
                this.download(res.data);
            });
        },
        // 下载文件
        download(data) {
            let url = URL.createObjectURL(
                new Blob([data], {
                    type: "application/vnd.ms-excel;charset=utf-8 ",
                })
            );
            let link = document.createElement("a");
            link.style.display = "none";
            link.href = url;
            link.setAttribute("download", "突发事件简报.docx");
            document.body.appendChild(link);
            link.click();
        },
    },
};
</script>
<style lang="stylus">

.commandReport{
    .accidentDsc{
        p{
            color:#000;
            white-space:inherit;
        }
        p:nth-child(1){
            text-indent: 1em!important;
        }
    }
  .el-table .cell{
    color:#000;
  }
  .elTable{
    width:90%;
    margin:auto;
    border:0;
    border-left:1px solid #000;
    border-top:1px solid #000;
    margin-bottom:20px;
    th, tr, td{
      color:#000;
      border: 0;
      border-right:1px solid #000;
      border-bottom:1px solid #000;
      font-size: 16px;
      font-family: FangSong;
    }
    tbody tr:hover>td {
      background-color:unset!important
    }
  }
}
</style>
<style lang="stylus" scoped>
.commandReport{
  position: fixed;
  left: 0;
  top: 0;
  right:0;
  bottom: 0;
  z-index:303;
  margin:auto;
  width: vw(1000);
  height:vh(900);
  background: rgba(255, 255, 255, 1);
  line-height:46px;
  .box{
    width:100%;
    height:100%;
    overflow: auto;
    padding: 50px;
    font-family:'FangSong';
    line-height:40px;
    .report-header{
      border-bottom: 2px solid #fe0000;
      text-align: center;
      color: #000;
      h1{
        font-size: 48px;
        color:#ff0000;
        font-family: SimHei;
      }
      p{
        font-size: 21px;
        line-height:21px;
        margin: 68px 0 70px;
        color: #000;
        text-indent: 2em;
      }
      .headerLine{
        font-size: 21px;
        line-height:45px;
        display: flex;
        justify-content: space-between;
        border-bottom:5px solid #fe0000;
        margin-bottom:1px;
        span{
          color:#000;
        }
      }
    }
    .report-content{
      font-size: 21px;
      color: #000;
      h2, h3, h4, h5{
        font-weight: 900;
        color: #000;
      }
      h2{
        font-size: 29px;
        line-height:29px;
        text-align: center;
        font-family: SimHei;
        margin:64px 0 69px;
        color: #000;
      }
      h3{
        text-indent: 2em;
        font-size: 21px;
        font-family: SimHei;
      }
      h4{
        font-size: 21px;
        text-indent: 2em;
      }
      h5{
        font-size: 16px;
        text-align: center;
        line-height:22px;
      }
      .firstItem, .secondItem{
        display: flex;
        justify-content: flex-start;
        color: #000;
        div{
            color:#000;
            p{
                color:#000;
                text-indent: 2em;
            }
        }
        span{
          text-indent: 2em;
          white-space: nowrap;
          font-weight: 900;
          color: #000;
          font-size: 21px;
        }
      }
      .tixi{
        flex-direction:column;
      }
      .content-third .thirdItem .tableBox{
          color: #000;
        p{
          font-size: 16px;
          line-height:36px;
          text-indent: 5em;
          color: #000;
        }
      }
      .content-forth{
        img{
          width:100%;
          height:auto;
          margin:auto;
          display: block;
        }
        p{
          font-size: 16px;
          text-align: center;
          line-height:50px;
          color: #000;
        }
      }

    }
    .report-footer{
      padding-top:1px;
      border-top: 2px solid #fe0000;
      color: #000;
      .footerLine{
        font-size: 21px;
        display: flex;
        justify-content: space-between;
        border-top:5px solid #fe0000;
      }
    }
  }
  .funcBtn{
    color:#fff;
    padding-top:5px;
    position:absolute;
    bottom:-35px;
    right:10px;
    text-align:center;
    p{
      float:right;
      margin-left: 20px;
      cursor: pointer;
      width: 102px;
      height: 30px;
      line-height: 30px;
      font-size: 18px;
      opacity: 1;
      background: #042039;
      border: 1px solid #17d0ff;
      border-radius: 3px;
      color: #17d0ff;
      img{
        width:18px;
        height:18px;
        vertical-align: middle;
        margin-right:8px;
      }
      .mousein{
        display:none;
      }
    }
    p:hover{
      background: #05718c;
      color:#fff;
      .mousein{
        display:inline-block;
      }
      .mouseout{
        display:none;
      }
    }
  }
}
</style>
